<template>
  <div class="user-list">
    <div class="artists-info" v-for="(item,index) in data" :key="index">
      <div class="artists-l">
        <div class="artists-img">
          <img v-lazy="item.avatarUrl" alt="">
        </div>
        <div class="artists-name">
          <span>{{ item.nickname }}</span>
          <span>{{ item.signature }}</span>
        </div>
      </div>
      <div class="artists-r">
        <span>
          <svg t="1639641329224" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10169" width="200" height="200"><path d="M189.5 416c-5 0-9-4-9-9 0-93.9 76.4-170.3 170.3-170.3 5 0 9 4 9 9s-4 9-9 9c-84 0-152.4 68.4-152.4 152.4 0.1 4.9-3.9 8.9-8.9 8.9z" fill="#FF7878" p-id="10170"></path><path d="M512.2 909c-79.9 0-348-305-401-366.2-0.5-0.6-0.9-1.1-1.3-1.7-30-44.7-45.9-96.9-45.9-151 0-148.9 120.6-270 268.8-270 66.9 0 130 24.4 179.4 69 49.4-44.7 112.4-69 179.4-69 148.2 0 268.8 121.1 268.8 270 0 54.1-15.9 106.3-45.9 150.9-0.4 0.6-0.9 1.2-1.3 1.7-53 61.2-321.2 366.3-401 366.3zM139.1 520.2c150.4 173.6 330.9 353 373.1 353 42.2 0 222.7-179.3 373.1-353 25.6-38.5 39.2-83.4 39.2-130C924.5 261.1 820 156 691.6 156c-63.1 0-122.3 25.1-166.5 70.6-6.8 6.9-18.9 6.9-25.7 0-44.3-45.5-103.5-70.6-166.6-70.6-128.4 0-232.9 105-232.9 234.1 0 46.6 13.5 91.5 39.2 130.1z m760.5 10.9h0.2-0.2z" fill="#FF7878" p-id="10171"></path></svg>
        </span>
          <span>关注</span>
      </div>
    </div>

    <div class="pagination">
      <van-pagination v-model="currentPage" 
        :total-items="totalCount" 
        :show-page-size="6" 
        :items-per-page="20"
        force-ellipses
        @change="pageChange">
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
      </van-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      data:Array,
      totalCount:Number,
    },

    data() {
      return {
        currentPage:1
      }
    },

    methods:{
      pageChange(val){
        this.$emit('pageChange',val);
      }
    }
  }
</script>

<style scoped>
.user-list{
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 10px;
}

.artists-info{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.artists-l{
  display: flex;
  align-items: center;
  width: 70%;
}

.artists-img{
  margin-right: 10px;
}

.artists-img img{
  width: 30px;
  height: 30px;
  border-radius: 100%;
}

.artists-name{
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}

.artists-name span:first-child{
  font-size: 14px;
}

.artists-name span:last-child{
  font-size: 12px;
}

.artists-r{
  display: flex;
  font-size: 12px;
  border: 1px solid red;
  border-radius: 30px;
  padding: 3px 5px;
  align-items: center;
}
</style>